<template>
    <div class="menu_bar">
        <div v-if="backTo">
            <router-link :to="backTo" class="menu_button">
                <i :class="backIcon"></i>
                <span>{{ backText }}</span>
            </router-link>
        </div>
        <div v-else>
            <router-link
                @click="backOnClick == null ? $router.back(-1) : backOnClick()"
                class="menu_button"
                to
            >
                <i :class="backIcon"></i>
                <span>{{ backText }}</span>
            </router-link>
        </div>
        <div v-if="showForwardButton == null ? checkLogin() : showForwardButton">
            <div v-if="forwardTo">
                <router-link :to="forwardTo" class="menu_button">
                    <span>{{ forwardText }}</span>
                    <i :class="forwardIcon"></i>
                </router-link>
            </div>
            <div v-else>
                <router-link
                    @click="forwardOnClick == null ? $router.back(-1) : forwardOnClick()"
                    class="menu_button"
                    to
                >
                    <span>{{ forwardText }}</span>
                    <i :class="forwardIcon"></i>
                </router-link>
            </div>
        </div>
    </div>
</template>

<script>import { apis } from "../api"

export default {
    props: {
        showForwardButton: {
            type: Boolean,
            default: null
        },
        backText: {
            type: String,
            default: "返回"
        },
        backIcon: {
            type: String,
            default: "ri-arrow-left-s-line"
        },
        forwardText: {
            type: String,
            default: "设置"
        },
        forwardIcon: {
            type: String,
            default: "ri-file-edit-line"
        },
        backOnClick: Function,
        forwardOnClick: Function,
        backTo: String,
        forwardTo: String
    },
    setup() {
        const checkLogin = () => apis.checkLogined()
        return { checkLogin }
    }
}
</script>

<style scoped lang="less">
.menu_bar {
    display: flex;
    justify-content: space-between;
}

.menu_button {
    padding: 5px;
    display: flex;
    align-items: center;
    font-size: 26px;
    font-weight: 900;
    gap: 10px;
}
</style>